import { computed, ref, watch } from "vue";
import gsap from "gsap";
// 因为不仅是条的变化,还涉及到数据值的动态变化,所以不能用css3

const colors = ["#334552", "#B34335", "#6E9FA5", "#A2C3AC", "#C8846C"];
export default function useGdp(gdpRef, maxSize) {
  const maxValue = computed(() => {
    if (gdpRef.value.length) {
      return Math.max(...gdpRef.value.map((it) => it.value));
    }
    return 0;
  });
  const bars = ref([]);
  // 条的最新状态,也是目标值,最终慢慢变成这个值
  const barsTarget = computed(() => {
    return gdpRef.value.map((it, i) => ({
      ...it,
      color: colors[i % colors.length],
      size: (it.value / maxValue.value) * maxSize,
    }));
  });

  watch(
    barsTarget,
    () => {
      // 将bars变化到barsTarget
      for (let i = 0; i < barsTarget.value.length; i++) {
        if (!bars.value[i]) {
          bars.value[i] = {
            ...barsTarget.value[i],
            size: 0,
            value: 0,
          };
        }
        // bars.value[i] 中的属性 逐步变化到 barsTarget.value[i]
        // 可以自己写函数变化,也可以使用gsap,这个是专门做这种事的,可以变化属性值也可以变化对象
        gsap.to(bars.value[i], {
          ...barsTarget.value[i],
          duration: 1,
        });


        // 把obj变成{ count: 100 }
        // const obj = { count: 0 };
        // gsap.to(obj, {
        //   count: 100,
        //   duration: 1,
        //   onUpdate: () => {
        //     console.log(obj);
        //   },
        // });


      }
    },
    {
      deep: true,
    }
  );

  return {
    bars,
  };
}

